<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>宋词生成</title>
    <script>var recommend ={{ recommend|tojson }}</script>
    <link rel="stylesheet" href="/static/css/login.css">
    <style>
        .confirm {
            background-color: #99CCCC;
            border: none;
            color: black;
            padding: 8px 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 14px;
            margin: 4px 2px;
            cursor: pointer;
            border-radius: 12px;
            box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.24), 0 12px 25px 0 rgba(0, 0, 0, 0.19);
        }

        .input {

            padding: 7px 0px;
            border-radius: 3px;
            padding-left: 5px;
            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
            -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
            -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
            transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s
        }

        .input :focus {
            outline: 0;
            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6)
        }

        .output {
            width: 50%;
            height: 320px;
            padding: 15px;
            background-color: #FFFFFF;
            font-family: Fangsong;
            font-size: large;
            text-align: center;
            line-height: 180%;
            overflow-y: auto
        }

    </style>	
</head>
<div>
    <a href="/" style="display: inline; color:white">首页</a>
    <p style="display: inline; color:white" align="right">
        {% if 'username' in session %}
         | 欢迎，{{ session['username'] }}
        {% endif %}
    </p>
</div>
    <div align="center">
        <span style="color: #FFFFFF;font-family: 华文行楷; font-size: 80px;text-shadow: 2px 2px 3px dimgray">随机生成宋词</span>
    </div>

    <form method="post">
        <div align="center">
            <p><strong style="color: #FFFFFF;letter-spacing: 5px; font-family: 华文楷体; font-size: larger">输入词牌名：</strong></p>
            <input type="text" class="input" name=ci_name value="默认随机生成" ; style="color: gray"
                   onclick="this.style.color='black';this.value='';">
            <input class="confirm" type="submit" value="确认">
            <br>

            <strong style="color: #FFFFFF;letter-spacing: 5px;font-family: 华文楷体; font-size: larger">详情美词：</strong>
            <br>
            <br>
            <textarea class="output" readonly="readonly">{{ ci_content }}</textarea>
        </div>
    </form>

</div>


</body>

</html>